<template>
  <div>
    <div class="top-header">
      <div class="left-menu">
        <el-menu
          default-active="市场宏观趋势"
          class="org-el-menu"
          background-color="#0F1920"
          text-color="#869FB1"
          active-text-color="#ffffff">
          <div v-for="(item,index) in menus" :key="index">
            <el-submenu :index="index+'a'" v-if="item.children">
              <template slot="title">
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="i.name" v-for="(i,idx) in item.children" :key="idx" @click="toUrl(i.link)">
                  <img :src="url[idx]" alt="">
                  {{i.name}}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item :index="index+'c'" v-else @click="toUrl(item.link)">
              <img :src="item.icon" alt="">
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
      <div class="right-content">
        <router-view :key="$store.state.id"/>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        menus:[
          // {
          //   name:"角色看板",
          //   link:'/menu/index'
          // },
          {
            name:"目标市场",
            link:'targetMarket',
            icon:'el-icon-location',
            showContent:false,
            children:[

              {name:"市场中心", link:'/full'},
              {name:"市场宏观趋势", link:'/full/marketMenu/targetMarketTrends/opportunityDetails'},
              {name:"市场可获得性", link:'/full/marketMenu/targetMarketGet'},
              {name:"竞争力评估", link:'/full/marketMenu/targetMarketCompetitive'},
              {name:"投资收益预算", link:'/full/marketMenu/targetMarketIncome'},
              {name:"目标市场草案", link:'/full/marketMenu/targetMarketDraft'},
            ]
          },
        ],
        url:[
          require('../images/marketMenu0.png'),
          require('../images/marketMenu1.png'),
          require('../images/marketMenu2.png'),
          require('../images/marketMenu3.png'),
          require('../images/marketMenu4.png'),
          require('../images/marketMenu5.png'),
        ]
      }
    },
    methods: {
      toUrl(url){
        this.$router.push({path: url});
      }
    },
  }
</script>
